/* hook组件 自定义 hook */
import React, {useEffect, useState} from 'react'
import {Button} from 'antd'

/*
*  自定义Hook
*  作用:提取封装一些公共的处理逻辑
*  玩法: 创建一个函数，名字需要是 useXxx ，后期就可以在组件中调用这个方法!
*
* */

const usePartial = (initialVal)=>{
    let [state,setState] = useState(initialVal)
    // setState: 不支持部分状态更改的
    // setPartial: 期望这个方法可以支持部分状态的更改
    const setPartial = (val) =>{
        setState({
            ...state,
            ...val
        })
    }
    return [state,setPartial]
}

// 自定义Hook，在组件第一次染完毕后，统一干点啥事
const useDidMount = (title ='11')=>{
    useEffect(()=>{
        alert(title)
    },[])
}

const Demo = function () {
    let [state, setState] = usePartial({
        supNum: 10,
        oppNum: 5
    })
    useDidMount()
    // if(1){
    //     useDidMount() // 报错
    // }
    const handle = (type) => {
        if (type === 'sup') {
            setState({
                supNum: state.supNum + 1
            })
        } else {
            setState({
                oppNum: state.oppNum + 1
            })
        }
    }
    return <div className="vote-box">
        <div className="main">
            <p>支持人数：{state.supNum}人</p>
            <p>反对人数：{state.oppNum}人</p>
        </div>
        <div className="footer">
            <Button type='primary' onClick={handle.bind(null, 'sup')}>支持</Button>
            <Button type='primary' onClick={handle.bind(null, 'opp')}>反对</Button>
        </div>
    </div>
}

export default Demo